<template>
  <el-tooltip :content="$tr('New Project')" v-if="buttonType == 'tool'">
    <el-button @click="onShow">
      <el-icon>
        <folder-add />
      </el-icon>
    </el-button>
  </el-tooltip>
  <el-button @click="onShow" v-else>
    <el-icon>
      <folder-add />
    </el-icon>
    <text v-html="'&nbsp;'" />
    {{ $tr("New Project") }}
  </el-button>
  <el-dialog v-model="show">
    <el-form :model="config" :rules="rules">
      <el-form-item :label="$tr('Project Name')" prop="name">
        <el-input v-model="config.name"></el-input>
      </el-form-item>
      <el-form-item :label="$tr('Parent Directory')">
        <directory-selector v-model="config.newProjectDir"></directory-selector>
      </el-form-item>
      <el-form-item>
        <p>
          {{ $tr("Files for new project will be placed at") }}:
          {{ config.newProjectDir + (isWindows() ? "\\" : "/") + config.name }}
        </p>
      </el-form-item>
    </el-form>
    <template #footer>
      <span>
        <el-button @click="show = false">{{ $tr("Cancel") }}</el-button>
        <el-button type="primary" @click="newProject">{{
          $tr("New Project")
        }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { newProject } from "@/api/cards";
import { reactive, ref } from "vue";
import { defineComponent } from "vue-demi";
import { FolderAdd } from "@element-plus/icons-vue";
import DirectorySelector from "@/components/panels/DirectorySelector.vue";
import store, { WORKDIR_UNDEFINED } from "@/api/store";
import { tr } from "@/assets/translation/trans";
import { ElMessage } from "element-plus";
import { getParentDir } from "@/utils/utils";
export default defineComponent({
  components: { FolderAdd, DirectorySelector },
  props: {
    buttonType: {
      type: String,
      required: true,
    },
  },
  setup() {
    return {
      show: ref(false),
      config: reactive({
        name: "simulation",
        newProjectDir: WORKDIR_UNDEFINED,
      }),
      rules: reactive({
        name: [
          {
            validator: (rule: any, value: any, callback: any) => {
              if (/^[\u4E00-\u9FA5A-Za-z0-9_\-+]+$/.test(value)) {
                callback();
              } else {
                callback(
                  new Error(
                    tr(
                      "The project name could only contain _, digits, alphabets and Chinese Characters"
                    )
                  )
                );
              }
            },
            trigger: "change",
          },
        ],
      }),
    };
  },
  methods: {
    async newProject() {
      try {
        await newProject(this.config.name, this.config.newProjectDir);
        this.show = false;
        this.config.name = this.config.name.trim();
        window.location.reload();
      } catch (err) {
        ElMessage.error(tr("Cannot create new project") + ":" + err);
        console.error(err);
      }
    },
    isWindows() {
      return navigator.userAgent.toLowerCase().match(/windows/) != null;
    },
    onShow() {
      this.config.newProjectDir = getParentDir(store.state.workdir);
      this.show = true;
    },
  },
  computed: {},
});
</script>

<style></style>
